<template>
	<div>
		<!--查询框 -->
		<div>
			<table valign="middle" class="table table-bordered search-table">
				<tbody>
					<tr>
						<td>名称/编码</td>
						<td><input class="form-control" type="text" v-model="goods.goodsName" placeholder="请输入查询关键字"></td>
						<td>供应商</td>
						<td>
							<select id="supplierId" class="form-control" v-model="goods.supplerId">
								<option v-for="option in options" v-bind:value="option.supplierId">
									{{ option.supplierName }}
								</option>
							</select>
							<span>{{ goods.supplerId }}</span>
						</td>
						<td>状态</td>
						<td>
							<select class="form-control" v-model="goods.idDel">
								<option value="1">启用</option>
								<option value="0">禁用</option>
							</select>
							<span>{{ goods.idDel }}</span>
						</td>
					</tr>
					<tr>
						<td>产品分类</td>
						<td><div class="input-group date datetimepicker col-md-5" data-date="" data-date-format="yyyy-mm" data-link-field="dtp_input1">
								<input class="form-control" size="16" type="text" value="" >
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div></td>
						<td class="td-btn" colspan="4">
							<button type="reset" class="btn btn-default">重置</button>
							<button @click="searchRows()" type="submit" class="btn btn-default">查询</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!--主表按钮-->
		<div class="main-btn">
			<button @click="add_btn()" data-toggle="modal" data-backdrop="static" data-target="#add" class="btn btn-default select-all">新增</button>
			<button @click="veiw_btn()" data-toggle="modal" data-backdrop="static" data-target="#add" class="btn btn-default select-all">修改</button>
			<button @click="edit_btn()" data-toggle="modal" data-backdrop="static" data-target="#add" class="btn btn-default select-all">查看</button>
			<button @click="del_btn()" data-toggle="modal" data-backdrop="static" data-target="#add" class="btn btn-default select-all">删除</button>
		</div>
		<!--主表信息-->
		<div class="table-srcoll">
			<table class="table table-bordered">
				<tbody>
					<tr class="th-bg">
						<th><input type="checkbox" class='input-checkbox' v-model='checked' @click="checkedAll()"></th>
						<th>序号</th>
						<th v-show="false">goodsId</th>
						<th>产品名称</th>
						<th>编码</th>
						<th>产品规格</th>
						<th>规格编码</th>
						<th>单位</th>
						<th>状态</th>
					</tr>
					<tr v-for="(data,index) in tablelist">
						<td class="td-checkbox"><input name="check1" type="checkbox" class="input-checkbox" v-model='checkboxModel' :value="data.id" :row_data="data"></td>
						<td class="td-index">{{index+1}}</td>
						<td v-show="false">{{data.goodsId}}</td>
						<td>{{data.goodsName}}</td>
						<td>{{data.code}}</td>
						<td>{{data.skuValue}}</td>
						<td>{{data.skuCode}}</td>
						<td>{{data.unitId}}</td>
						<td><span v-if="data.isDel==1">禁用</span><span v-if="data.isDel==0">启用</span></td>
					</tr>
				</tbody>
				<tfoot>
				<tr>
					<td colspan="8">
						<div class="pull-left">
							<button class="btn btn-default" @click="refresh">刷新</button>
						</div>
						<div class="col-sm-12 pull-right">
							<boot-page ref="page" :async="true" :url="url"></boot-page>
						</div>
					</td>
				</tr>
			</tfoot> 
			</table>
		</div>
		<!--编辑，查询弹框 -->
		<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="#modal-header" aria-hidden="true">
			<div class="modal-dialog  ">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">{{dis[0]}}</h4>
					</div>
					<div class="modal-body">
						<table valign="middle" class="table table-bordered search-table">
							<tbody>
								<tr>
									<td>报表类型</td>
									<td>
										<select class="form-control" v-bind:disabled="dis[1]">
											<option>销售日报</option>
											<option>销售月报</option>
										</select>
									</td>
									<td>名称1</td>
									<td>
										<select class="form-control" v-bind:disabled="dis[2]">
											<option>test</option>
											<option>test</option>
										</select>
									</td>
									<td>名称3</td>
									<td><input v-bind:disabled="dis[3]" class="form-control" type="text"></td>
								</tr>
								<tr>
									<td>名称4</td>
									<td><input class="form-control" v-bind:disabled="dis[4]" type="text"></td>
									<td>名称5</td>
									<td><input class="form-control" v-bind:disabled="dis[5]" type="text"></td>
									<td>名称6</td>
									<td><input class="form-control" v-bind:disabled="dis[6]" type="text"></td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">添加</button>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>
<style scoped>
	
</style>
<script type="text/ecmascript-6">
	import Common from 'static_resource/js/common.js'
	import bootPage from '../../pagination/BootPage'
	import 'static_resource/js/bootstrap-datetimepicker.min.js'
	import 'static_resource/js/bootstrap-datetimepicker.zh-CN.js'
	import './base.js'

	export default {
		name: 'unit_manage',
		data() {
			return {
				dis:[],
				url: '/GoodsAdmin/queryListForPageGoods',
				isDis: [], //接收编辑、查看、新增的属性
				edit: ['编辑', '', false, '', false, '', false],
				veiw: ['查看', '', '', '', '', '', ''],
				add: ["新增", false, '', '', '', '', ''],
				options: [], //供应商
				checked: "", //
				checkboxModel: [], //选中的行
				goods: {
					"barCode": "",
					"categoryId": "",
					"code": "",
					"companyId": "",
					"companyName": "",
					"createTime": "",
					"createUser": "",
					"dataOrg": "",
					"goodsId": "",
					"goodsName": "",
					"goodsType": "",
					"id": "",
					"ids": "",
					"isDel": "",
					"note": "",
					"pageIndex": 0,
					"pageSize": 10,
					"py": "",
					"skuCode": "",
					"skuPy": "",
					"skuValue": "",
					"sortField": "",
					"sortOrder": "",
					"tenantId": "",
					"unitId": "",
					"updateTime": "",
					"updateUser": ""
				},
			};

		},
		components: {
			bootPage
		},
		computed: {
			tablelist() {
				return this.$store.state.pageData;
			}
		},
		activated() {
			$('.datetimepicker').datetimepicker({
				language: 'zh-CN',
				weekStart: 1,
				todayBtn: 1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});
			this.ajaxAllSupplier();
		},
		watch: { //深度 watcher
			'checkboxModel': {
				handler: function(val, oldVal) {
					if(this.checkboxModel.length === this.checkboxData.length) {
						this.checked = true;
					} else {
						this.checked = false;
					}
				},
				deep: true
			}
		},

		methods: {
			ajaxAllSupplier: function() {
				this.$http({
					url: '/base/SupplierAdmin/queryListSupplier',
					method: 'GET',
				}).then(
					function(res) {
						this.options = res.data;
						console.log(this.options)
					},
					function(res) {
						console.log(res)
					});
			},
			del_btn: function() {
				Common.myAlert('添加成功', 'success');
				$(".loading").fadeIn(500);
				//$(".loading").fadeOut(500);
			},
			edit_btn: function() {
				this.dis = this.edit
			},
			veiw_btn: function() {
				this.dis = this.veiw
			},
			add_btn: function() {
				this.dis = this.add
			},
			searchRows: function() {
				this.$store.state.param = this.goods
				this.$refs.page.refresh()
			},
			checkedAll: function() { //全选全不选
				/*$('[name=check1]:checkbox').attr('checked', this.checked);*/
				var _this = this;
				console.log(_this.checkboxModel);
				if(this.checked) { //实现反选
					_this.checkboxModel = [];
				} else { //实现全选
					_this.checkboxModel = [];
					_this.checkboxData.forEach(function(item) {
						_this.checkboxModel.push(item.id);
					});
				}
			},
			refresh: function() {
				this.$refs.page.refresh() // 这里提供了一个表格刷新功能
			}

		}
	}
</script>